import Https from "@/utils/Https";
import { ProTable } from "@ant-design/pro-components";
import { Image, message } from "antd";
import React, { useState } from "react";
import styles from "./index.less";
interface propType {
  onSuccess: (url) => void; //上传成功的回调事件
}
const IconTable: React.FC<propType> = (props) => {
  const { onSuccess } = props;
  const [loading, setLoading] = useState(false);
  const columns = [
    {
      title: "图标",
      dataIndex: "url",
      width: 150,
      hideInSearch: true,
      render: (id, record) => {
        return <Image width={40} height={40} src={record.url}></Image>;
      },
    },
    {
      title: "名称",
      dataIndex: "originalName",
    },
  ];
  const getList = async (params) => {
    setLoading(true);
    let res: any = await Https.get(
      "/oss/list",
      { ...params, imageType: 1 },
      true
    );
    setLoading(false);
    let records = [];
    let total = 0;
    if (res.code == 200 && res.data) {
      records = res.data.records;
      total = res.data.total;
    } else {
      message.error(res.msg);
    }
    return { success: true, data: records, total };
  };
  //获取选中的列
  const rowSelectChange = (selectedRowKeys, selectedRows, info) => {
    let url = "";
    if (selectedRows.length > 0) {
      url = selectedRows[0].url;
    }
    onSuccess && onSuccess(url);
  };
  return (
    <div className={styles.IconTable}>
      <ProTable
        columns={columns}
        rowKey="ossId"
        loading={loading}
        options={false}
        rowSelection={{
          onChange: rowSelectChange,
          type: "radio",
        }}
        scroll={{ y: 300 }}
        pagination={{
          showSizeChanger: true,
        }}
        request={async (params) => {
          return await getList(params);
        }}
      />
    </div>
  );
};

export default IconTable;
